<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
  <link rel="stylesheet" href="./index.css" />
</head>

<body>
  <section id="wrap">
    <h2 class="title">百度音乐榜单</h2>
    <ul id="list">
      <li>
        <input type="checkbox" checked="false" />
        <span>第一条信息</span>
        <a href="javascript:;" class="collect">收藏</a>
        <a href="javascript:;" class="cancelCollect">取消收藏</a>
        <a href="javascript:;" class="remove">删除</a>
      </li>
    </ul>
    <footer class="footer">
      <label><input type="checkbox" id="checkAll" />全选/全不选</label>
      <a href="javascript:;" id="remove">删除</a>
      <input type="text" id="newInfo" />
      <a href="javascript:;" id="add">添加</a>
    </footer>
  </section>
  <script>
    document.querySelector("input").checked = false
    // document.querySelector("input").setAttribute("checked",true);
    var data = [
      {
        id: 0,
        title: "残酷月光 - 费启鸣",
        checked: true,
        collect: true
      }, {
        id: 1,
        title: "兄弟 - 艾热",
        checked: false,
        collect: false
      }, {
        id: 2,
        title: "毕生 - 夏增祥",
        checked: false,
        collect: true
      }, {
        id: 3,
        title: "公子向北去 - 李春花",
        checked: false,
        collect: false
      }, {
        id: 4,
        title: "战场 - 沙漠五子",
        checked: true,
        collect: false //是否收藏 true 收藏 false 没有收藏
      }
    ];
    // 1.按照数据渲染 音乐列表 2.全选 全不选 ：注意联动  3.删除 ：（删除每一项 、删除选中的音乐）4.添加功能
    // 5.收藏和取消收藏功能
    // 先修改数据在渲染视图；


    // 1.渲染视图 
    function renderDom(data) {
      // 通过data数据生成dom结构
      var listEle = document.querySelector("#list");
      listEle.innerHTML = "";
      data.forEach(function (item) {
        var liEle = document.createElement("li");
        liEle.innerHTML = ` <input type="checkbox" ${item.checked ? 'checked' : ''} />
          <span>${item.title}</span>
          ${item.collect ? '<a href="javascript:;" class="cancelCollect">取消收藏</a>' : '<a href="javascript:;" class="collect">收藏</a>'}
          <a href="javascript:;" class="remove">删除</a>`;
        listEle.appendChild(liEle);
      })
      addEvent();
    }
    renderDom(data);
    // 2.绑定事件添加操作功能 
    function addEvent() {
      var lis = document.querySelectorAll("#list li");
      lis.forEach(function (li, key) {
        // 不用事件委托 需要做判断；判断如果有元素 才能绑定事件；
        // var cancelCollectEle = li.querySelector(".cancelCollect");
        // console.log(cancelCollectEle)
        // // if (cancelCollectEle) {
        // //   cancelCollectEle.onclick = function () {
        // //     console.log(1111);
        // //   }
        // // }
        // cancelCollectEle && (cancelCollectEle.onclick = function(){
        //     console.log(111);
        // })


        // 通过事件委托来实现事件的绑定
        li.onclick = function (e) {
          var target = e.target;
          // 取消收藏
          if (target.className == "cancelCollect") {
            console.log("点击了取消收藏按钮");
            //改变数据里对应的状态；
            // console.log(key);
            data[key].collect = false;
            // 渲染视图；
            renderDom(data);
          }
          // 点击收藏
          if (target.className == 'collect') {
            console.log("点击了收藏按钮");
            data[key].collect = true;
            renderDom(data);
          }

          // 删除按钮
          if (target.className == "remove") {
            data.splice(key, 1);
            renderDom(data);
          }

          // 勾选 选中和取消操作；
          if (target.nodeName == "INPUT") {

            //  console.log(target.checked)
            // 把勾选的状态和数据同步一致；
            data[key].checked = target.checked;
            console.log(data);
            isCheckAll();
          }
          // console.log(target.nodeName)
        }


      })
    }



    // 获取全选按钮
    var checkallEle = document.querySelector("#checkAll");
    checkallEle.onclick = function () {
      // console.log(this.checked);
      var that = this;
      data.forEach(function (item) {
        item.checked = that.checked;
      })
      renderDom(data);
    }



    // 判断是否全选 
    function isCheckAll() {
      var res = data.every(function (item) {
        return item.checked;
      })
      checkallEle.checked = res;
    }


    // 删除勾选中的音乐
    var delEle = document.querySelector("#remove");
    delEle.onclick = function () {
      var res = data.filter(function (item) {
        return !item.checked
      })

      data = res;
      // console.log(res);
      renderDom(data);
    }

    // 添加音乐操作；
    var addEle = document.querySelector("#add");
    var addInput = document.querySelector("#newInfo");
    addEle.onclick  =function(){
      var value = addInput.value;
      var obj = {
        // id:data[data.length-1].id+1,
        id:data.length,
        title:value,
        checked:false,
        collect:false
      }
      // console.log(obj);
      data.push(obj);
      // console.log(data);
      renderDom(data);

    }
    // var a=10;
    // var obj = {
    //   name: "张三",
    //   age: 19
    // }
    /* 
      1,2,3,4,5,9,10,34,35
      eslint
    */
  </script>
</body>

</html>